<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户管理</title>

        <style>
            .td-editBth,.td-delBth{
                border: none;
                cursor: pointer;
                margin: 5px;
                padding: 5px,10px;
                border-radius: 5px;
            }
            .td-editBth{
                background-color: lightblue;
            }
            .td-delBth{
                background-color: lightcoral;
            }
            .td-delBth:hover,.td-editBth:hover{
                /* 透明度 */ 
                background-color: antiquewhite;
            }
            #form1{
                display: none;
            }
        </style>
    </head>
    <body>
        <button onclick="form1.style='display:block;'">新增用户</button>
        <form id="form1" onsubmit="return validForm(this)">
            <input type="hidden" name="id" id="uid" value="0">
            <div>
                <label >用户名：</label>
                <input type="text" id="name" name="uname" placeholder="请输入用户名(3-8位)">
            </div>
            <div>
                <label >性别 </label>
                <input type="radio" name="sex" value="男" checked>男
                <input type="radio" name="sex" value="女">女
            </div>
            <div>
                <label >电话：</label>
                <input type="text" name="phone" placeholder="请输入11位的电话">
            </div>
            <div>
                <button>提交</button>
            </div>
        </form>
        
        <!-- <h3>用户管理</h3> -->
        <table border="1" cellsapcing="0" cellpadding="10" align="center">
            <caption><h3>用户管理</h3></caption>
            <thead>
                <th>ID</th>
                <th>用户名</th>
                <th>性别</th>
                <th>手机号</th>
                <th>功能列表</th>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
        <script>
            
            
            window.onload=function(){
                loaddata(); // 加载数据
            }
            
            function loaddata(){
                fetch("/cgi-bin/users").then(resp=>resp.json()).then(data=>{
                    // data 的数据格式： {code:0, datas: [{id:1, name:'', sex:'' ,phone:''},{}...]}
                    console.log(data);
                    if (data.code == 0) {
                        data.datas.forEach(user=>{
                            let tr = document.createElement("tr");
                            let td1 = document.createElement("td");
                            let td2 = document.createElement("td");
                            let td3 = document.createElement("td");
                            let td4 = document.createElement("td");
                            let td5 = document.createElement("td");

                            td1.innerText = user.id;
                            td2.innerText = user.name;
                            td3.innerText = user.sex;
                            td4.innerText = user.phone;
                            
                            // 在td5中添加两个按钮（编辑按钮，删除按钮）
                            let editBtn = document.createElement("button");
                            let delBtn = document.createElement("button");
                            editBtn.innerText = "E";
                            delBtn.innerText = "X";
                            // 为两个按钮添加class类名
                            editBtn.className = "td-editBth";
                            delBtn.className = "td-delBth";

                            // 设置删除按钮的点击事件
                            delBtn.onclick = function(){
                                if (confirm("是否删除"+user.name+","+user.phone+"?")) {
                                    fetch("/cgi-bin/user?id="+user.id).then(resp=>resp.json()).then(data=>{
                                        // data:{code:0,msg:"删除成功"}   {code:1,msg:"删除失败"}
                                        alert(data.msg);
                                        if(data.code == 0){
                                            tbody.innerHTML = "";
                                            loaddata(); // 刷新数据
                                        }
                                        
                                    })
                                }
                            }

                            td5.append(editBtn,delBtn);

                            tr.append(td1,td2,td3,td4,td5);

                            tbody.append(tr);
                        });
                    }
                });
            }
            function validForm(_form){
                if(!/[\u4e00-\u9fa5A-Za-z]{3,8}/.test(_form.uname.value)){
                   alert("请输入用户名(3-8位)!"); 
                   return false;
                }
                if(!/[0-9]{11}/.test(_form.phone.value)){
                   alert("请输入用户名(3-8位)!"); 
                   return false;
                }
                // 获取表单中的数据
                let uid = _form.id.value;
                let form_data = {
                    name:_form.name.value,
                    sex:_form.sex.value,
                    phone:_form.phone.value
                };
                if(uid == 0){
                    // 新增
                    fetch(
                        "/cgi-bin/users",
                        {
                            method:"POST",
                            body:JSON.stringify(form_data),
                            headers:{
                               "content-type": "application/json;charset=utf-8" 
                            }
                        }
                    ).then(resq=>resq.json()).then(data=>{
                        if(data.code == 0){
                            alert("添加成功!");
                            tbody.innerHTML = "";
                            loaddata();
                            _form.style="display:none;";
                            _form.reset();
                        }
                    })
                }
            }
        </script>
    </body>
</html>